<template>
    <Layout>
            <Row style="margin-right:10px; margin-top: 5px;">
                <Col span="24">
                    <Card dis-hover>
                        <div ref="envinfoContainer" style="height: 260px;"></div>
                    </Card>
                </Col>
            </Row>
            <Table ref='table'  no-data-text="没有查询到相关数据!"  :loading='pageStatus.loading'
                   border :columns="columns1"  :data="dataTable" >
            </Table>
    </Layout>
</template>
<script>
    import {Api} from '@/api/index.js'
    import pageCommonFunction from '@/components/pageCommonFunction.js'
    import echarts from 'echarts';

    export default {
        data() {
            return{
                ...this.createCommonDataField(),
                columns1: [
                    { title: '序号', width: 80, fixed: 'left', align: 'center', render: (h, params) => {
                            return h('span', params.index+1);
                        }},
                    { key:'companyName',title: '单位名称', fixed: 'left', align: 'center', minWidth: 240 },
                    { key:'num',title: '注册安全工程师数量',  align: 'center', minwidth: 160  },
                ],
                tableHeight:10,
                // api
                queryUrl:Api.statisticCertifiedEngineer,

            }
        },
        mounted(){
            this.setTableHeight()
            this.query();
        },
        methods: {
            ...pageCommonFunction,
            query() {
                // this.queryAjax();
                let container = echarts.init(this.$refs.envinfoContainer);
                this.$http.get(this.queryUrl).then((res)=>{
                    this.dataTable = res.data.data.data;
                    let option = this.getOption();
                    option.xAxis[0].data = res.data.data.xAxis
                    option.series[0].data = res.data.data.yAxis
                    container.setOption(option);
                    window.onresize = container.resize;
                })

            },
            getOption() {
                let option = {
                    title: {
                        text: '注册安全师数量统计',
                        textStyle: {
                            fontSize: 14
                        }
                    },
                    tooltip: {	//提示框组件
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    // legend: {	//图例组件
                    //     right: 18,
                    //     // data: ['注册安全师数量']
                    // },
                    color: ['#40C4FF'],
                    grid: {
                        left: '3%',
                        right: '3%',
                        bottom: '1%',
                        containLabel: true,
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: [],
                            axisLabel: {
                                interval: 0,
                                formatter:function(value){
                                    var str = "";
                                    var num = 6; //每行显示字数
                                    var valLength = value.length; //该项x轴字数
                                    var rowNum = Math.ceil(valLength / num); // 行数
                                    if(rowNum > 1) {
                                        for(var i = 0; i < rowNum; i++) {
                                            var temp = "";
                                            var start = i * num;
                                            var end = start + num;
                                            temp = value.substring(start, end) + "\n";
                                            str += temp;
                                        }
                                        return str;
                                    } else {
                                        return value;
                                    }
                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '注册安全师数量',
                            type: 'bar',
                            data: []
                        },
                    ]
                };
                return option;
            }
        }
    }
</script>
<style scoped>
    /deep/ .table-box .ivu-table-header th{position: static;border: 1px solid #ddd;}
</style>
